<template>
  <div>
    <s-breadcrumb></s-breadcrumb>
    <el-card>
      <el-alert title="添加商品信息" type="info" center show-icon :closable="false"></el-alert>
      <el-steps :space="200" :active="active_index-0" finish-status="success" align-center>
        <el-step title="基本信息"></el-step>
        <el-step title="是否多规格"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="详细参数"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <el-form label-position="top" :model="add_form" :rules="add_rules"  ref="add_ref">
        <el-tabs :tab-position="'left'" v-model="active_index" :before-leave="beforeLeave">
          <el-tab-pane label="基本信息" name="0">
            <el-form-item label="商品分类" prop="product_type_id">
              <el-cascader placeholder="请选择商品分类"
                v-model="value"
                :options="product_type_list"
                :props="{ expandTrigger: 'hover' ,value:'id',label:'title'}"
                @change="add_handle_change" clearable>
              </el-cascader>
            </el-form-item>
            <el-form-item label="商品名称" prop="name">
              <el-input placeholder="请输入商品名称" maxlength="30" clearable show-word-limit v-model="add_form.name"></el-input>
            </el-form-item>
            <el-form-item label="商品描述" prop="describe">
              <el-input placeholder="请输入商品描述" maxlength="100" clearable show-word-limit type="textarea" :rows="3" v-model="add_form.describe"></el-input>
            </el-form-item>
            <el-form-item label="图片" prop="image_id">
              <s-file-image @confirm_imsge="add_confirm_image"></s-file-image>
            </el-form-item>
            <el-form-item label="轮播图">
              <s-file-image-all @confirm_imsge="add_confirm_image_all"></s-file-image-all>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
              <el-input type="number" placeholder="请输入排序" maxlength="10" clearable show-word-limit v-model="add_form.sort"></el-input>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="是否多规格" name="1">
            <el-form-item label="是否多规格" prop="specs_status">
              <el-radio-group v-model="add_form.specs_status"  size="medium">
                <el-radio border :label="0">否</el-radio>
                <el-radio border :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品属性" name="2">
            <div v-if="add_form.specs_status===1&&attrbute_key_list.length>0">
              <el-form-item v-for="(item,index) in attrbute_key_list" :key="item.id" :label="item.name">
                  <el-checkbox border v-for="(i,ind) in item.attrbute_value_to" :key="i.id" :label="i.value" :checked="i.checked" @change="checkbox_change(index,ind)"></el-checkbox>
              </el-form-item>
            </div>

            <div v-else>暂无属性</div>
          </el-tab-pane>
          <el-tab-pane label="详细参数" name="3">
            <table v-if="add_form.specs_status===1">
              <thead>
                <tr>
                  <th v-for="(item,index) in item_list" :key="index">{{item.name}}</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,index) in sku_list" :key="index">
                  <td v-for="(i,ind) in item" :key="ind">
                    <div v-if="i.id>0">{{i.name}}</div>
                    <el-input v-else maxlength="10" v-model="i.name" clearable show-word-limit></el-input>
                  </td>
                </tr>
              </tbody>
            </table>
            <div v-else>
              <el-form-item label="产品售价">
                <el-input placeholder="请输入产品售价" maxlength="10" clearable show-word-limit v-model="add_form_d.money"></el-input>
              </el-form-item>
              <el-form-item label="产品市场价">
                <el-input placeholder="请输入产品市场价" maxlength="10" clearable show-word-limit v-model="add_form_d.bazaar_money"></el-input>
              </el-form-item>
              <el-form-item label="产品成本价">
                <el-input placeholder="请输入产品成本价" maxlength="10" clearable show-word-limit v-model="add_form_d.cost_money"></el-input>
              </el-form-item>
              <el-form-item label="邮费">
                <el-input placeholder="请输入邮费" maxlength="10" clearable show-word-limit v-model="add_form_d.postage"></el-input>
              </el-form-item>
              <el-form-item label="销量">
                <el-input placeholder="请输入销量" maxlength="10" clearable show-word-limit v-model="add_form_d.sales"></el-input>
              </el-form-item>
              <el-form-item label="库存">
                <el-input placeholder="请输入库存" maxlength="10" clearable show-word-limit v-model="add_form_d.stock"></el-input>
              </el-form-item>
            </div>
          </el-tab-pane>
          <el-tab-pane label="商品内容" name="4">
            <el-form-item label="商品内容">
              <s-editor :content="add_form.content" @confirm_content="confirm_content"></s-editor>
            </el-form-item>
            <!-- 按钮区 -->
            <el-button class="send_btn" :disabled="store_btn" type="primary" @click="add()">确 定</el-button>
          </el-tab-pane>
        </el-tabs>
       </el-form>
    </el-card>
  </div>
</template>

<script>
import sFileImage from '../../../../components/s-file-image/s-file-image.vue'
import sFileImageAll from '../../../../components/s-file-image-all/s-file-image-all.vue'
import sEditor from '../../../../components/s-editor/s-editor.vue'
export default {
  components: {
    's-file-image': sFileImage,
    's-file-image-all': sFileImageAll,
    's-editor': sEditor
  },
  data () {
    var checkSort = (rule, value, callback) => {
      // 定义正则表达式
      const regSort = /^[1-9]{1}[0-9]{0,10}$/
      if (regSort.test(value)) {
        return callback()
      }
      callback(new Error('请输入排序（大于0的数字）!'))
    }
    return {
      store_btn: this.is_string('shop/product/store'), // 添加按钮是否禁用
      active_index: '0',
      product_type_list: [], // 商品分类数据
      value: [], // 商品分类数据选择的数据
      attrbute_key_list: [], // 属性数据
      item_list: [], // 选择的数据属性
      sku_list: [],
      add_form: {
        name: '',
        product_type_id: '',
        describe: '',
        image_id: '',
        sort: 1,
        images: '',
        specs_status: 0,
        content: ''
      },
      add_form_d: {
        money: '0',
        bazaar_money: '0',
        cost_money: '0',
        postage: '0',
        stock: '0',
        sales: '0'
      },
      add_rules: {
        product_type_id: [
          { required: true, message: '请选择商品分类！', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入商品名称！', trigger: 'blur' },
          { min: 2, max: 20, message: '商品名称长度在2到20个字符', trigger: 'blur' }
        ],
        describe: [
          { required: true, message: '请输入商品描述！', trigger: 'blur' },
          { min: 2, max: 100, message: '商品描述长度在2到100个字符', trigger: 'blur' }
        ],
        image_id: [
          { required: true, message: '请选择图片！', trigger: 'blur' }
        ],
        specs_status: [
          { required: true, message: '请选择是否多规格！', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请输入排序！', trigger: 'blur' },
          { validator: checkSort, trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.get_product_type_list()
  },
  methods: {
    // 确定
    add () {
      this.$refs.add_ref.validate(valid => {
        if (valid) {
          if (this.add_form.specs_status === 0) {
            const addAata = this.add_form
            addAata.sales = this.add_form_d.sales
            addAata.money = this.add_form_d.money
            addAata.bazaar_money = this.add_form_d.bazaar_money
            addAata.postage = this.add_form_d.postage
            addAata.product_spec = []
            addAata.product_spec.push(this.add_form_d)
            this.$base.request({
              that: this,
              method: 'POST',
              url: 'shop/product/store',
              data: addAata
            }, (res) => {
              if (res.code === 8888) {
                this.$base.message({ that: this, message: res.msg })
                this.$router.push('/shop/product/index')
              }
            })
          } else {
            const addAata1 = this.add_form
            const length = this.sku_list[0].length
            addAata1.money = this.sku_list[0][length - 6].name
            addAata1.bazaar_money = this.sku_list[0][length - 5].name
            addAata1.postage = this.sku_list[0][length - 3].name
            addAata1.sales = 0
            addAata1.product_spec = []
            for (var i = 0; i < this.sku_list.length; i++) {
              addAata1.sales += parseInt(this.sku_list[i][length - 1].name)
              const specs = []
              const sku = []
              for (var x = 0; x < this.sku_list[i].length - 6; x++) {
                specs.push({
                  id: this.sku_list[i][x].id,
                  name: this.sku_list[i][x].name
                })
                sku.push(this.sku_list[i][x].id)
              }
              addAata1.product_spec.push({
                money: this.sku_list[i][length - 6].name,
                bazaar_money: this.sku_list[i][length - 5].name,
                cost_money: this.sku_list[i][length - 4].name,
                postage: this.sku_list[i][length - 3].name,
                stock: this.sku_list[i][length - 2].name,
                sales: this.sku_list[i][length - 1].name,
                specs: specs,
                sku: sku
              })
            }
            const attrbuteList = []
            for (var j = 0; j < this.item_list.length; j++) {
              if (this.item_list[j].sub) {
                attrbuteList.push(this.item_list[j])
              }
            }
            addAata1.attrbute_list = attrbuteList
            this.$base.request({
              that: this,
              method: 'POST',
              url: 'shop/product/store',
              data: addAata1
            }, (res) => {
              if (res.code === 8888) {
                this.$base.message({ that: this, message: res.msg })
                this.$router.push('/shop/product/index')
              }
            })
          }
        }
      })
    },
    // 编辑器回调
    confirm_content (res) {
      this.add_form.content = res
    },
    // 切换选项卡触发
    beforeLeave (activeName, oldActiveName) {
      this.$refs.add_ref.validate(valid => {
      })
      if (oldActiveName === '0' && this.value.length === 0) {
        return false
      }
    },
    // 商品分类
    get_product_type_list (callBack) {
      this.$base.request({
        that: this,
        url: 'shop/product/product_type_list'
      }, (res) => {
        if (res.code === 8888) {
          this.product_type_list = res.data
          callBack && callBack()
        }
      })
    },
    // 添加图片回调
    add_confirm_image (res) {
      this.add_form.image_id = res.image_id
    },
    // 添加多图回调
    add_confirm_image_all (res) {
      if (res.length > 0) {
        const imageArr = []
        for (var i = 0; i < res.length; i++) {
          imageArr.push(res[i].id)
        }
        this.add_form.images = imageArr.join('|')
      } else {
        this.add_form.images = ''
      }
    },
    // 添加获取选择器值
    add_handle_change () {
      if (this.value.length > 0) {
        this.add_form.product_type_id = this.value[this.value.length - 1]
        this.get_product_attrbute_key_list()
      } else {
        this.add_form.product_type_id = ''
        this.attrbute_key_list = []
      }
    },
    // 获取属性
    get_product_attrbute_key_list (callBack) {
      this.$base.request({
        that: this,
        url: 'shop/product/product_attrbute_key_list',
        data: { product_type_id: this.add_form.product_type_id }
      }, (res) => {
        if (res.code === 8888) {
          this.attrbute_key_list = res.data
          callBack && callBack()
        }
      })
    },
    checkbox_change (index, ind) {
      this.attrbute_key_list[index].attrbute_value_to[ind].checked = !this.attrbute_key_list[index].attrbute_value_to[ind].checked
      const itemArr = []
      for (var i = 0; i < this.attrbute_key_list.length; i++) {
        for (var j = 0; j < this.attrbute_key_list[i].attrbute_value_to.length; j++) {
          if (this.attrbute_key_list[i].attrbute_value_to[j].checked) {
            if (itemArr[i]) {
              itemArr[i].sub.push({
                id: this.attrbute_key_list[i].attrbute_value_to[j].id,
                name: this.attrbute_key_list[i].attrbute_value_to[j].value
              })
            } else {
              itemArr[i] = {
                id: this.attrbute_key_list[i].id,
                name: this.attrbute_key_list[i].name,
                sub: [{
                  id: this.attrbute_key_list[i].attrbute_value_to[j].id,
                  name: this.attrbute_key_list[i].attrbute_value_to[j].value
                }]
              }
            }
          }
        }
      }
      this.item_list = itemArr
      this.setDataInfo(() => {
        if (itemArr.length !== 0) {
          itemArr.push({
            id: 'money',
            name: '产品售价'
          })
          itemArr.push({
            id: 'bazaar_money',
            name: '产品市场价'
          })
          itemArr.push({
            id: 'cost_money',
            name: '产品成本价'
          })
          itemArr.push({
            id: 'postage',
            name: '邮费'
          })
          itemArr.push({
            id: 'stock',
            name: '库存'
          })
          itemArr.push({
            id: 'sales',
            name: '销量'
          })
          this.item_list = itemArr
        }
      })
    },
    setDataInfo (callBack) {
      this.sku_list = []
      if (this.item_list.length === 0) {
        return false
      }

      if (this.item_list.length < 2) {
        const dataInfo = []
        for (var y = 0; y < this.item_list[0].sub.length; y++) {
          const arr = []
          arr.push({
            id: this.item_list[0].sub[y].id,
            name: this.item_list[0].sub[y].name
          })
          arr.push({
            id: 'money',
            name: '0'
          })
          arr.push({
            id: 'bazaar_money',
            name: '0'
          })
          arr.push({
            id: 'cost_money',
            name: '0'
          })
          arr.push({
            id: 'postage',
            name: '0'
          })
          arr.push({
            id: 'stock',
            name: '0'
          })
          arr.push({
            id: 'sales',
            name: '0'
          })
          dataInfo.push(arr)
        }
        this.sku_list = dataInfo
      } else {
        const arr1 = []
        for (var x = 0; x < this.item_list.length; x++) {
          arr1.push(this.item_list[x].sub)
        }
        const dataInfoOne = [].reduce.call(arr1, function (col, set) {
          const res = []
          col.forEach(function (c) {
            set.forEach(function (s) {
              var t = [].concat(Array.isArray(c) ? c : [c])
              t.push(s)
              res.push(t)
            })
          })
          return res
        })
        for (var w = 0; w < dataInfoOne.length; w++) {
          dataInfoOne[w].push({
            id: 'money',
            name: '0'
          })
          dataInfoOne[w].push({
            id: 'bazaar_money',
            name: '0'
          })
          dataInfoOne[w].push({
            id: 'cost_money',
            name: '0'
          })
          dataInfoOne[w].push({
            id: 'postage',
            name: '0'
          })
          dataInfoOne[w].push({
            id: 'stock',
            name: '0'
          })
          dataInfoOne[w].push({
            id: 'sales',
            name: '0'
          })
        }
        this.sku_list = dataInfoOne
      }
      callBack && callBack()
    }
  }
}
</script>
<style lang="less" scoped>
@import 'add.less';
</style>
